<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-text="暂无内容" auto-scroll-to-top-when-reload>
		<view slot="top" class="title">
			<view class="title_left">
				<view class="title_left_line"></view>
				<text class="title_left_text">所有客户成交列表</text>
			</view>
			<text class="title_rightText">最近一月</text>
		</view>

		<view class="salesItem" v-for="item in dataList" :key="item.id">
			<view class="salesItem_head">
				<text class="salesItem_head_time">{{
          $u.timeFormat(item.createTime, "yyyy-mm-dd")
        }}</text>
				<text class="salesItem_head_name">客户：{{ item.customerNickName || '--'}}</text>
			</view>
			<view class="salesItem_content">
				<u-image width="244rpx" height="158rpx" radius="8rpx" :src="item.goodsSnapshot.thumbnail"
					mode="aspectFill" />
				<view class="salesItem_content_right">
					<text class="salesItem_content_right_title line1">{{
            item.goodsName
          }}</text>
					<text class="salesItem_content_right_sku">{{
            item.goodsSnapshot.skuSimpleSpecs
          }}</text>

					<view class="salesItem_content_right_price">
						<view>
							<u--text :text="item.goodsPrice" bold color="#000" size="24rpx" mode="price" />
						</view>
						<text style="font-size: 24rpx; font-size: #000">{{
              "x" + item.goodsCount
            }}</text>
					</view>
				</view>
			</view>
			<view class="salesItem_foot">
				实付<view>
					<u--text :text="item.orderDealAmount" bold size="32rpx" color="#FF0000" mode="price" />
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		getOrderList
	} from "@/api/statistics";

	export default {
		data() {
			return {
				dataList: [],
				startTime: '',
				endTime: ''
			};
		},
		methods: {
			getParamsTime() {
				let now = new Date()
				this.endTime = uni.$u.timeFormat(now, 'yyyy-mm-dd hh:MM:ss');
				// 当前月的日期
				let nowDate = now.getDate();
				let lastMonth = new Date(now.getTime());
				// 设置上一个月（这里不需要减1）
				lastMonth.setMonth(lastMonth.getMonth());
				// 设置为0，默认为当前月的最后一天
				lastMonth.setDate(0);
				// 上一个月的天数
				let daysOflastMonth = lastMonth.getDate();
				// 设置上一个月的日期，如果当前月的日期大于上个月的总天数，则为最后一天
				this.startTime = new Date(lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate))
				this.beginTime = uni.$u.timeFormat(this.startTime, 'yyyy-mm-dd hh:MM:ss');
			},
			queryList(pageNum, pageSize) {
				this.getParamsTime()
				getOrderList({
						pageSize,
						pageNum,
						endTime: this.endTime,
						startTime: this.beginTime,
						orderStatusList: [2, 3, 5],
					})
					.then((result) => {
						const data = result.data.rows.map((item) => {
							return {
								...item,
								goodsSnapshot: JSON.parse(item.goodsSnapshot),
							};
						});
						this.$refs.paging.complete(data);
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
		},
	};
</script>

<style>
	page {
		background: #f6f9ff;
	}
</style>

<style lang="scss" scoped>
	.title {
		width: 100%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_rightText {
			font-size: 24rpx;
			color: #588bf3;
		}

		&_left {
			display: flex;
			align-items: center;

			&_line {
				width: 8rpx;
				height: 28rpx;
				border-radius: 200rpx;
				background-color: #588bf3;
				margin-right: 20rpx;
			}

			&_text {
				font-weight: bold;
				color: #333;
				font-size: 28rpx;
			}
		}
	}

	.salesItem {
		width: 694rpx;
		min-height: 356rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 12rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;

		&_foot {
			width: 100%;
			font-size: 24rpx;
			color: #ff0000;
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx;
		}

		&_head {
			width: 100%;
			height: 80rpx;
			border-bottom: 1px solid #f3f3f3;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			box-sizing: border-box;

			&_time {
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
			}

			&_name {
				font-size: 24rpx;
				color: #000;
			}
		}

		&_content {
			width: 100%;
			padding: 20rpx 12rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f3f3f3;

			&_right {
				width: 410rpx;
				height: 158rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				&_sku {
					font-size: 26rpx;
					color: #666666;
				}

				&_title {
					font-size: 28rpx;
					font-weight: bold;
					color: #000;
				}

				&_price {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
